<template>
    <div style="margin-top:20px;">
      <row>
        <video ref="localVideo" style="width: 300px;height: 200px;" @click="toggleFullscreen"></video>
        <video ref="remoteVideo" style="width: 300px;height: 200px;" @click="toggleFullscreen"></video>
      </row>
      <div style="text-align: left;margin-top: 20px;">
        <el-button type="warning" @click="endCall">挂断</el-button>
      </div>
    </div>
    <el-dialog title="通话邀请" v-model="centerDialogVisible" width="20%" center>
      <div class="dialog2">
        <div class="start">
          <el-row>
            <el-button type="primary" icon="el-icon-search" @click=accept>接受</el-button>
            <el-button type="primary" icon="el-icon-search" @click=refuce>拒绝</el-button>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
      </span>
      </div>
    </el-dialog>
    <el-dialog title="视频通话" v-model="centerDialogVisible2" width="20%" center>
      <div class="dialog2">
        <div class="start">
          <el-row>
            <el-text>接通中，请稍后</el-text>
          </el-row>
        </div>
        <span slot="footer" class="dialog-footer">
      </span>
      </div>
    </el-dialog>
  </template>
  <script>
  import { Peer } from 'peerjs'
  export default {
    props:['message'],
    data () {
      return {
        centerDialogVisible: false,
        centerDialogVisible2: false,
        youName:"",
        deliverId:this.msg,
        myPeerid: "",
        youPeerid: "1",
        path: "ws://localhost:9090/webSocket/admin",
        localStream: null,
        remoteStream: null,
        peer: null,
        call: null,
        socket: "",
      }
    },
    watch:{
      message(newValue){
        this.centerDialogVisible2=true,
        this.youName=newValue
        this.startCaller();
        
      },
      youPeerid(newValue){
        this.centerDialogVisible = true
      }
    },
    mounted(){
      const libraryScript = document.createElement('script');
      libraryScript.src = 'https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js';
      libraryScript.type = 'application/javascript';
      document.head.appendChild(libraryScript);
      libraryScript.onload = () => {
      // 在在线库加载完成后执行其他逻辑
      const libraryScript2 = document.createElement('script');
      libraryScript2.src = "https://cdn.bootcss.com/sockjs-client/1.5.2/sockjs.min.js";
      libraryScript2.type = 'application/javascript';
      document.head.appendChild(libraryScript2);
      libraryScript2.onload = () => {
      this.socket = new SockJS('http://localhost:8080/websocket-endpoint');
      var stompClient = Stomp.over(this.socket);
      var self=this;
      stompClient.connect({}, function () {
        // console.log('Connected: ' + frame);
        var recipient = localStorage.getItem('name');
        stompClient.subscribe('/user/queue/myQueue-' + recipient, function(message) {
          self.youPeerid = message.body;
            console.log('Received:',message.body);
            console.log('youPeerid',this.youPeerid)
            // console.log('Received: ' + JSON.parse(greeting.body).content);
        }.bind(this)
        );
    }.bind(this));
    // stompClient.connect({}, function (){
    //     // console.log('Connected: ' + frame);
    //     sendMessage();
    // });

    };
  }

      
    },
    methods: {
      //接受视频通话
      accept (){
        this.centerDialogVisible=false;
        this.getUserMedia({ video: true, audio: true }, (stream) => {
          this.localStream = stream
          this.$refs.localVideo.srcObject = stream
          this.$refs.localVideo.autoplay = true
          this.$refs.localVideo.play()
        }, (err) => {
          console.log('获取本地流失败', err)
        })
        this.peer = new Peer()
        this.peer.on('open', (id) => {
          this.myPeerid = id
          this.call = this.peer.call(this.youPeerid, this.localStream)
          this.call.on('stream', (remoteStream) => {
            console.log(remoteStream)
            this.remoteStream = remoteStream
            this.$refs.remoteVideo.srcObject = remoteStream
            this.$refs.remoteVideo.autoplay = true
          })
          this.call.on('close', () => {
            console.log('用户通话关闭')
          })
          this.call.on('error', (err) => {
            console.log(err)
          })
        })
      },
      //拒绝视频通话
      refuce(){
        this.centerDialogVisible=false;
      },
      //发起视频通话
      startCaller () {
        this.getUserMedia({ video: true, audio: true }, (stream) => {
          this.localStream = stream
          this.$refs.localVideo.srcObject = stream
          this.$refs.localVideo.autoplay = true
          this.$refs.localVideo.play()
        }, (err) => {
          console.log('获取本地流失败', err)
        })
        this.peer = new Peer()
        this.peer.on('open', (id) => {
          this.myPeerid = id
          var stompClient = Stomp.over(this.socket);
        stompClient.send("/user/queue/myQueue-"+this.youName, {}, this.myPeerid);
        })
        this.peer.on('call', (call) => {
          this.call = call
          call.answer(this.localStream)
          call.on('stream', (remoteStream) => {
            console.log(remoteStream, '>>>>')
            this.remoteStream = remoteStream
            this.$refs.remoteVideo.srcObject = remoteStream
            this.$refs.remoteVideo.autoplay = true
            this.centerDialogVisible2=false
          })
        })
      },
      //全屏
      toggleFullscreen () {
        const video = this.$refs.localVideo
        if (video.requestFullscreen) {
          video.requestFullscreen()
        } else if (video.mozRequestFullScreen) {
          video.mozRequestFullScreen()
        } else if (video.webkitRequestFullscreen) {
          video.webkitRequestFullscreen()
        } else if (video.msRequestFullscreen) {
          video.msRequestFullscreen()
        }
      },
      //获取本地视频流
      getUserMedia (constraints, success, error) {
        if (navigator.mediaDevices.getUserMedia) {
          navigator.mediaDevices.getUserMedia(constraints).then(success).catch(error)
        } else if (navigator.webkitGetUserMedia) {
          navigator.webkitGetUserMedia(constraints).then(success).catch(error)
        } else if (navigator.mozGetUserMedia) {
          navigator.mozGetUserMedia(constraints).then(success).catch(error)
        } else if (navigator.getUserMedia) {
          navigator.getUserMedia(constraints).then(success).catch(error)
        }
      },
      //挂断通话
      endCall () {
        if (this.call) {
          this.call.close()
          this.call = null
        }
        this.remoteStream = null
        this.$refs.remoteVideo.srcObject = null
        this.myPeerid = null
        this.localVideo = null
        this.$refs.localVideo.srcObject = null
        this.arr = true
      }
    }
  }
  </script>